<template>
  <div>
    <ZgDialog
      width="40%"
      top="10%"
      title="新增字段"
      v-model="visible"
      @ok="save">
      <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
        <a-form-item label="字段名称" required>
          <ZgInput :width="160" v-model="name"></ZgInput>
        </a-form-item>
        <a-form-item label="字段编码" required>
          <ZgInput :width="160" v-model="code"></ZgInput>
        </a-form-item>
        <a-form-item label="字段类型" required>
          <div class="flx-s">
            <ZgEnum :width="160" v-model="compType" code="字段类型"></ZgEnum>
            <div class="flx-s">
              <div v-if="hasType" class="flx-s ml10">
                字典类型:<ZgDicType class="ml10" :width="160" v-model="extra.字典类型"></ZgDicType>
              </div>
              <div v-if="hasRows" class="flx-s ml10">
                行数:<ZgNumber class="ml10" :width="120" v-model="extra.行数"></ZgNumber>
              </div>
              <div v-if="hasHeight" class="flx-s ml10">
                高度:<ZgNumber class="ml10" :width="120" v-model="extra.高度"></ZgNumber>
              </div>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="默认值" v-if="hasDefaultVal">
          <div v-if="compType==='单行文本'">
            <ZgInput :width="400" v-model="strDefaultVal"></ZgInput>
          </div>
          <div v-if="compType==='整数'">
            <ZgNumber :width="160" v-model="numberDefaultVal"></ZgNumber>
          </div>
          <div v-if="compType==='浮点数'">
            <ZgNumber :width="160" v-model="numberDefaultVal" isFloat></ZgNumber>
          </div>
          <div v-if="compType==='单选框'">
            <ZgCheckbox v-model="booleanDefaultVal"></ZgCheckbox>
          </div>
          <div v-if="compType==='多选'&&extra.字典类型.length>0">
            <ZgSelectMany v-model="arrDefaultVal" :code="extra.字典类型"></ZgSelectMany>
          </div>
          <div v-if="compType==='字典'&&extra.字典类型.length>0">
            <ZgDictionary :width="240" v-model="strDefaultVal" :code="extra.字典类型"></ZgDictionary>
          </div>
          <div v-if="compType==='开关'">
            <ZgSwitch v-model="booleanDefaultVal"></ZgSwitch>
          </div>
        </a-form-item>
        <a-form-item label="模糊匹配">
          <ZgSwitch v-model="isLike"></ZgSwitch>
        </a-form-item>
        <a-form-item v-if="compType==='单行文本'" label="正则表达式">
          <ZgSelect :width="160" class="mr10" v-model="regexType" :options="regexOptions"></ZgSelect>
          <ZgInput v-if="regexType.length>0" :width="360" v-model="regex"></ZgInput>
        </a-form-item>
        <a-form-item v-if="regex.length>0" label="错误提示语">
          <ZgInput :width="400" v-model="errorMsg"></ZgInput>
        </a-form-item>
      </a-form>
    </ZgDialog>
  </div>
</template>
<script>
import { columnMixin } from './js/mixin'
import { getDataTypeByCompType, filterExtra } from './js/constant'
export default {
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  mixins: [columnMixin],
  data () {
    return {
      visible: false
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    save () {
      if (this.formId.length === 0) {
        this.$error({ title: '请选择表单' })
        return
      }
      if (this.name.length === 0) {
        this.$error({ title: '请输入字段名称' })
        return
      }
      if (this.code.length === 0) {
        this.$error({ title: '请输入字段编码' })
        return
      }
      if (this.compType.length === 0) {
        this.$error({ title: '请设置字段类型' })
        return
      }
      const param = {
        formId: this.formId,
        sort: 0,
        name: this.name,
        code: this.code,
        compType: this.compType,
        dataType: getDataTypeByCompType(this.compType),
        defaultVal: this.getDefaultVal(),
        isLike: this.isLike,
        regex: this.regex,
        errorMsg: this.errorMsg,
        extra: JSON.stringify(filterExtra(this.extra, this.compType))
      }

      this.$http.post('/zg-autoform/column/add', param, () => {
        this.visible = false
        this.$emit('ok')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
